<template>
    <div class="TeacherHeader">
        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#ffffff" v-model="username"
            text-color="#1a1d27">
            <span class="userName">欢迎 {{ username }}</span>
            <span class="logout" @click="Logout">退出登录</span>
        </el-menu>

    </div>
</template>

<script>
export default {
    name: "TeacherHeader",
    data() {
        return {
            username: ""
        }

    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        //获取姓名
        getName() {
            this.axios.get("/teacher/getteacher")
                .then(res => {
                    console.log(res.data);
                    this.username = res.data.name;
                })
        },
        Logout() {
            this.axios.post("/teacher/logout")
                .then(res => {
                    if (res.data == "success") {
                        this.$router.push("/Login");
                    }
                })
        }
    },
    mounted() {
        this.getName();
    }
};
</script>


<style scoped>
@font-face {
    font-family: "Heavy";
    src: url(../../font/思源柔黑等宽版Heavy.ttf);
}

@font-face {
    font-family: "textFont";
    src: url(../../font/也字工厂喵喵体.ttf);
}

@font-face {
    font-family: "xingKai";
    src: url(../../font/也字工厂世无双行楷.ttf);
}

.el-menu-demo {
    text-align: right;
    line-height: 50px;
    font-size: 20px;
    font-weight: 700;
    font-family: xingKai;
}

.userName,
.logout {
    margin-right: 40px;
}

.logout:hover {
    color: red;
    cursor: pointer
}
</style>